import { PlusOutlined } from '@ant-design/icons'
import { Button, Divider, Form } from 'antd'
import { ProZoomModalForm, ProZoomModalFormProps } from '@zoom-design/zoom-design-demo'
import { ModalForm, ProForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components'
import { Header } from 'antd/es/layout/layout'
import I18n from '/@/wms/locale/locale.tsx'

type HomeModalProps<T = Record<string, any>, U = Record<string, any>> = ProZoomModalFormProps<T,U> & {
  record?: any,
  tableActionRef?: any
}

const HomeModal = (props: HomeModalProps) => {
  const [form] = Form.useForm<any>()
  const {record,title,tableActionRef} = props
  const { t } = I18n.i18n
  return (
    <ProZoomModalForm
      // @ts-ignore
      labelWidth="auto"
      width={'30%'}
      title={<>{t(`${title}`)}</>}
      trigger={<Button type="primary">{t(`${title}`)}</Button>}
      form={form}
      modalProps={{
        destroyOnClose: true
      }}
      onFinish={async values => {
        console.log(values)
        const modelValue = { ...record, ...values }
        console.log('modelValue', modelValue)
        console.log('tableActionRef', tableActionRef)
        tableActionRef?.current?.reload()
        return true
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="lg"
          name="orderStatus"
          label={t('订单状态')}
          tooltip={t('最长为 24 位')}
          placeholder="请输入名称"
          initialValue={record?.orderStatus}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormDateTimePicker
          width="lg"
          name="orderDate"
          label="订单时间"
          initialValue={record?.orderDate}
        />
      </ProForm.Group>
    </ProZoomModalForm>
  )
}
export default HomeModal